import { lazy, Suspense } from 'react'
import State from './components/useState.tsx'
import Reducer from './components/useReducer.tsx'
import Cart from './components/cart.tsx'
import SyncExternalStore from './components/useSyncExternalStore.tsx'
import Transition from './components/useTransition.tsx'
import DeferredValue from './components/useDeferredValue.tsx'
import Effect from './components/useEffect.tsx'
import Ref from './components/useRef.tsx'
import ImperativeHandle from './components/useImperativeHandle.tsx'
import Context from './components/useContext.tsx'
import Memo from './components/memo.tsx'
import Callback from './components/usecallback.tsx'
import DebugValue from './components/useDebugValue.tsx'
import Id from './components/useId.tsx'
import Communication from './components/communication.tsx'
import Controll from './components/controll.tsx'
import SuspenseComponent from './components/suspense.tsx'
import HOC from './components/HOC.tsx'
import Portal from './components/createPortal.tsx'
import CSSInJS from './components/cssinjs.tsx'
import Zustand from './components/zustand.tsx'

import router from './router'
import { RouterProvider } from 'react-router'

const AsyncComponent = lazy(() => import('./components/suspense.tsx'))

function App() {
  return (
    <>
      {/* <State />
      <Reducer />
      <Cart />
      <SyncExternalStore />
      <Transition />
      <DeferredValue />
      <Effect />
      <Ref />
      <ImperativeHandle />
      <Context />
      <Memo />
      <Callback />
      <DebugValue />
      <Id />
      <Communication />
      <Controll />
      <Suspense fallback={<div>loading...</div>}>
        <AsyncComponent />
      </Suspense>
      <HOC />
      <Portal />
      <CSSInJS /> */}
      
      <Zustand />

      <RouterProvider router={router} />

    </>
  )
}

export default App
